<div id="subscription_overlay" class="overlay new-style" data-overlay="subscriptions">
    <div class="flex overlay-content">
        <div class="subscriptions-container overlay-container">
            <div class="subscriptions-header">
                <div class="fa fa-chevron-left"></div>
                <span class="subscriptions-title">{{t 'Channels' }}</span>
                <div class="exit">
                    <span class="exit-sign">&times;</span>
                </div>
            </div>
            <div class="left">
                <div class="list-toggler-container">
                    <div id="add_new_subscription">
                        {{#if can_create_streams}}
                        <button class="create_stream_button create_stream_plus_button tippy-zulip-delayed-tooltip" data-tooltip-template-id="create-new-stream-tooltip-template" data-tippy-placement="bottom">
                            <span class="create_button_plus_sign">+</span>
                        </button>
                        {{/if}}
                        <div class="float-clear"></div>
                    </div>
                </div>
                <div class="input-append stream_name_search_section" id="stream_filter">
                    <input type="text" name="stream_name" id="search_stream_name" class="filter_text_input" autocomplete="off"
                      placeholder="{{t 'Filter channels' }}" value=""/>
                    <button type="button" class="btn clear_search_button" id="clear_search_stream_name">
                        <i class="fa fa-remove" aria-hidden="true"></i>
                    </button>
                </div>
                <div class="no-streams-to-show">
                    <div class="subscribed_streams_tab_empty_text">
                        <span class="settings-empty-option-text">
                            {{t 'You are not subscribed to any channels.'}}
                            {{#if can_view_all_streams}}
                            <a href="#channels/all">{{t 'View all channels'}}</a>
                            {{/if}}
                        </span>
                    </div>
                    <div class="not_subscribed_streams_tab_empty_text">
                        <span class="settings-empty-option-text">
                            {{t 'No channels to show.'}}
                            <a href="#channels/all">{{t 'View all channels'}}</a>
                        </span>
                    </div>
                    <div class="all_streams_tab_empty_text">
                        <span class="settings-empty-option-text">
                            {{t 'There are no channels you can view in this organization.'}}
                            {{#if can_create_streams}}
                                <a href="#channels/new">{{t 'Create a channel'}}</a>
                            {{/if}}
                        </span>
                    </div>
                </div>
                <div class="streams-list" data-simplebar data-simplebar-tab-index="-1">
                </div>
            </div>
            <div class="right">
                <div class="display-type">
                    <div id="stream_settings_title" class="stream-info-title">{{t 'Channel settings' }}</div>
                </div>
                <div class="nothing-selected">
                    {{#if can_create_streams}}
                    <button type="button" class="create_stream_button animated-purple-button">{{t 'Create channel' }}</button>
                    <span class="settings-empty-option-text">
                        {{#tr}}
                            First time? Read our <z-link>guidelines</z-link> for creating and naming channels.
                            {{#*inline "z-link"}}<a href="/help/getting-your-organization-started-with-zulip#create-channels" target="_blank" rel="noopener noreferrer">{{> @partial-block}}</a>{{/inline}}
                        {{/tr}}
                    </span>
                    {{/if}}
                </div>
                <div id="stream_settings" class="settings" data-simplebar data-simplebar-tab-index="-1" data-simplebar-auto-hide="false">
                    {{!-- edit stream here --}}
                </div>
                {{> stream_creation_form }}
            </div>
        </div>
    </div>
</div>
